<template>
  <a-modal
    v-model="innerVisible"
    :title="$t('all.autotext84')"
    :footer="null"
    width="70%"
    :maskClosable="false"
    @cancel="handleCancel"
  >
    <a-row>
      <a-col :span="20" :style="{'height':modalHeight + 'px'}">
        <div v-show="pdfShow" id="pdf" class="pdf-wrap">
          <div id="demo"></div>
        </div>
        <div v-show="!pdfShow" class="img-wrap">
          <img style="width:100%;" :src="imgUrl"/>
        </div>
      </a-col>
      <a-col :span="4" class="view-over" :style="{'height':modalHeight + 'px'}">
        <div class="view-wrap" v-for="(item, i) in allList" :key="i">
          <div class="pdf-view" v-if="item.fileType === pdfText" @click="itemTap(item, i)">
            <img style="width:20px;" src="../../assets/pdf.png"/>
            <div class="pdf-view-text">PDF {{ $t('all.autotext1258') }}</div>
          </div>
          <div class="img-view" v-else @click="itemTap(item, i, 'img')">
            <img style="width:100%;" :src="item.fileUrl"/>
          </div>
        </div>
      </a-col>
    </a-row>
    <div class="btn-wrap" v-if="!fileListSee">
      <a-space>
        <a-button type="primary" @click="sureUpload">{{ $t('all.autotext49') }}</a-button>
        <a-upload
          accept=".pdf, .jpg, .jpeg, .png"
          action="/api/common/upload"
          :showUploadList="false"
          @change="handleChange"
        >
          <a-button class="btn-border">{{ $t('all.autotext278') }}</a-button>
        </a-upload>
        <a-button  class="btn-border" @click="remove">{{ $t('all.autotext412') }}</a-button>
        <a-button type="primary" class="btn-back" @click="handleCancel">{{ $t('all.autotext892') }}</a-button>
      </a-space>
    </div>
  </a-modal>
</template>
<script>
import modalMixin from '@/utils/modal.mixin'
import Pdfh5 from 'pdfh5'
import 'pdfh5/css/pdfh5.css'
// import { applyPaper } from '@/api/consent/consent'
export default {
  props: {
    id: {
      type: [Number, String]
    },
    fileListSee: {
      type: Boolean,
      default: false
    },
    fileList: {
      type: Array,
      default: () => ([])
    }
  },
  mixins: [modalMixin],
  data () {
    return {
      proId: '',
      current: 0,
      numPages: null,
      pdfh5: null,
      newPdfUrl: '',
      modalHeight: 500,
      allList: [],
      imgUrl: '',
      pdfShow: true,
      pdfText: 'pdf'
    }
  },
  created () {
    const pd = localStorage.getItem('CURRENT_PROID')
    if (pd) {
      this.proId = parseInt(pd)
    }
  },
  mounted () {
    this.modalHeight = Number(document.documentElement.clientHeight * 0.7)
  },
  methods: {
    modalUpdated () {
      this.allList = this.fileList
      this.allList.forEach(item => {
        item.fileUrl = this.$minio + (item.fileUrl ? item.fileUrl : item.response.data)
        item.fileType = item.fileUrl ? item.fileUrl.substring(item.fileUrl.lastIndexOf('.') + 1) : item.response.data.substring(item.response.data.lastIndexOf('.') + 1)
      })
      if (this.allList[0].fileType === this.pdfText) {
        this.getpdfPage()
      } else {
        this.getpdfPage(this.allList[0])
      }
    },
    // 监听关闭弹窗，清空上传的数据
    handleCancel () {
      this.innerVisible = false
      this.remove()
    },
    getpdfPage (e) {
      if (!this.allList.length) {
        this.pdfShow = false
        return
      }
      this.$nextTick(() => {
        if (!e) {
          this.pdfShow = true
          this.newPdfUrl = 'demo.pdf'
          this.pdfh5 = new Pdfh5('#demo', {
            pdfurl: this.allList.length > 0 ? this.allList[this.current].fileUrl : null,
            lazy: true
          })
        } else {
          this.pdfShow = false
          this.imgUrl = e.fileUrl
        }
      }, 200)
    },
    handleChange ({ file, fileList }) {
      if (file.status === 'done') {
        const { response } = file
        if (response && response.status === '1' && response.data) {
          this.allList = [...this.allList, file]
          this.allList.forEach(item => {
            item.fileUrl = this.$minio + item.response.data
            item.fileType = item.response.data.substring(item.response.data.lastIndexOf('.') + 1)
          })
          // 上传大于1后不渲染
          if (this.allList.length > 1) return
          if (file.fileType !== this.pdfText) {
            this.getpdfPage(file)
          } else {
            this.getpdfPage()
          }
        } else {
          this.allList = []
          this.$message.error(response && response.detail || this.$t('all.autotext740'))
        }
      }
    },
    remove () {
      this.allList = []
      this.imgUrl = null
      this.$emit('update:fileList', this.allList)
      this.getpdfPage()
    },
    itemTap (item, i, type) {
      if (this.current === i) return
      this.current = i
      if (type) {
        this.getpdfPage(item)
      } else {
        this.getpdfPage()
      }
    },
    sureUpload () {
      console.log(this.$t('all.autotext101'))
      // const params = {
      //   proId: this.proId,
      //   applyId: this.$route.query.id,
      //   fileUrls: this.allList.map(item => item.response.data).join(',')
      // }
      // applyPaper(params).then(res => {
      //   this.innerVisible = false
      //   this.$emit('handleOk')
      // })
    }
  }
}
</script>
<style lang="less" scoped>
.btn-wrap {
  display: flex;
  justify-content: center;
  margin-top:20px;
  button {
    width:100px;
  }
  .btn-border{
    border:1px solid #43D8D2;
    color: #43D8D2;
  }
  .btn-back {
    background:#F5F4F7;
    border: 1px solid #F5F4F7;
    color: #0F121B;
  }
}
.pdf-wrap{
  width:100%;
  height:100%;
}
.img-wrap{
  width:100%;
  height:100%;
  overflow-y: scroll;
}
.view-over {
  overflow-y: scroll;
}
.view-wrap {
  width: 100%;
  padding:5px 10px;
  .pdf-view {
    width: 100%;
    height:100px;
    overflow: hidden;
    border: 1px solid #eee;
    text-align: center;
    padding-top: 30%;
    box-sizing: border-box;
    .anticon {
      font-size: 20px;
    }
    &-text {
      font-size: 12px;
      color: #4D5C6F;
      margin-top: 6px;
    }
  }
  .img-view {
    width: 100%;
    max-height:100px;
    overflow: hidden;
    border: 1px solid #eee;
  }
}
</style>
